import base from '../base.js'

import RowPiece from '../../api/schedules.js'

export default class extends base {
    constructor(popur) {
        super(popur)
        this.data = {
            _id: popur._id,
        }
        this.movies_id = popur._id
    }
    render() {

        this.$el.html(`
            <h1>排片情况</h1>
            <button type="button" class="layui-btn layui-btn-sm return" style='margin: 10px 0 0 0;'>
                <i class="layui-icon layui-icon-return layui-font-12"></i> 返回
            </button>
            <hr/>
            <table id="demoExamine" lay-filter="testExamine"></table>
        `)
        this.return = $('.return')
        this.table = layui.table;
        this.laypage = layui.laypage;
    }
    handle() {
        this.return.on("click", e => {
            location.hash = "#/info/schedules"
        })
    }
    mounted() {
        this.rerender()
    }
    async rerender() {  // this.table = layui.table;
        // this.laypage = layui.laypage;
        // console.log(1111);
        const _id = this.data

        this.data = await RowPiece.queryPaipian(_id)
        this.tbody = $('#aa')
        this.tbody.html(`
           ${_.map(this.data.movies, item => {
              
            return `
                <tr> 
                    <td>${item.movieId.cname}</td>
                    <td>${item.cinemasId.name}</td>
                    <td>${item.theaterId.name}</td>
                    <td>${item.price}</td>
                    <td>${item.showTime}</td>
                    <td>${item.date}</td>
                    <td>
                        <button>修改</button>
                        <button>删除</button>
                    </td>
                </tr>
               `
        })}
       `)
       
        layui.use('table', () => {
            this.table.render({
                elem: "#demoExamine"
                , cols: [[ //表头
                    , { field: '', title: '电影名称', templet: res => res.movieId.cname }
                    , { field: '', title: '影院', templet: res => res.cinemasId.name }
                    , { field: '', title: '放映厅', templet: res => res.theaterId.name }
                    , { field: 'price', title: '价格' }
                    , { field: 'showTime', title: '时间' }
                    , { field: 'date', title: '日期' }
                    , {
                        field: '', title: '操作', templet: res => {
                            const { _id } = res
                            return `
                        <a class="layui-btn layui-btn-xs layui-btn " lay-event="button">修改排片</a>
                        <button lay-event="edit"  id="withExport" _id="${_id}" type="button" class=" layui-btn layui-btn-xs layui-btn-sm layui-btn-danger" >删除排片</button>
                     `
                        }
                    }
                ]]
            });

            // console.log(this.data);
            this.table.reload("demoExamine", {
                data: this.data.movies,
            });
        });


        this.table.on('tool(testExamine)', async obj => {
            var data = obj.data; //获得当前行数据
            var layEvent = obj.event;
            if (layEvent === 'edit') {
                const msg = {
                    _id:data._id,
                    movies_id:this.movies_id
                }
                const result = await RowPiece.delesched(msg)
                this.table.reload("demoExamine", {
                    data: result.movies,
                });
                layer.msg('删除成功', {
                    time: 1000, //20s后自动关闭
                });
            }




            if (layEvent === 'button') {
                const { showTime, date, price } = data
                layer.open(
                    {
                        title: '修改排片',
                        type: 1,
                        content: `

                        <div style="padding:20px;">
                        <div class="layui-form-item" >

                            <label class="layui-form-label" style="width:auto;" >电影：</label>
                            <div class="layui-input-inline">
                            <input type="text"  style="width:180px;" class="layui-input" name="movies" id="movies" value='${data.movieId.cname}' readonly > 
                            </div>
                        </div>

                        <div class="layui-form-item" >

                            <label class="layui-form-label" style="width:auto;" >影院：</label>
                            <div class="layui-input-inline">
                            <input type="text" style="width:180px;" class="layui-input" name="cinemas" id="cinemas" value='${data.cinemasId.name}' readonly></input>
                            </div>
                        </div>

                   
                        <div class="layui-form-item" >

                            <label class="layui-form-label" style="width:auto;" >映厅：</label>
                            <div class="layui-input-inline">
                            <select type="text" style="width:180px;" class="layui-select" name="theaters" id="theaters" value='${data.theaterId.name}'></select>
                            </div>
                        </div>
                        <div class="layui-form-item" >

                            <label class="layui-form-label" style="width:auto;" >价格：</label>
                            <div class="layui-input-inline">
                            <input type="text" style="width:180px;"class="layui-select" name="price" id="price" value='${price}'></input>
                            </div>
                        </div>


                        <div class="layui-form-item">
                            <label class="layui-form-label" style="width:auto;">日期：</label>
                            <div class="layui-input-inline">
                            <input type="date" name="date" class="layui-input" value='${date}' >
                            </div>
                        </div>

                        <div class="layui-form-item">
                            <label class="layui-form-label" style="width:auto;">时间：</label>
                            <div class="layui-input-inline">
                            <input type="time" name="time" class="layui-input"  value='${showTime}' >
                            </div>
                        </div>
                        


                     </div>
                        `
                        , btn: ['保存', '取消'],
                        success: async () => {
                           

                            const { cinemasId } = { cinemasId: data.cinemasId._id }
                            const YTdata = await RowPiece.gettheaters({ cinemasId })
                            console.log(YTdata)
                            $('#theaters').html(`
                                ${_.map(YTdata, item => {
                                return `
                                    ${item.status ? `<option value="${item._id}">${item.name}</option>` : ""}
                                    `
                            }).join('')}
                          `)
                        },
                        yes: async (index, layero) => {
                            //按钮【按钮一】的回调
                            const rseult = {
                                movies_id:this.movies_id,
                                _id: data._id,
                                theaterId: $('#theaters').val(),
                                price: $('#price').val(),
                                showTime: $('input[name=time]').val(),
                                date: $('input[name=date]').val(),
                            }
                            const xiuGaiPaipian = await RowPiece.modification(rseult)
                            
                                layer.close(index)
                                layer.msg('修改成功', {
                                    time: 1000, //20s后自动关闭
                                });
                                this.table.reload("demoExamine", {
                                    data: xiuGaiPaipian.movies,
                                });


                        }
                    },
                );
            }
        });





    }
}